<template>
    <div>
        <!-- <loading loadingStyle="height: 400px" v-if="loadingShow"></loading> -->
        <section v-if="!loadingShow">
            <div class="notice">
                <header>通知</header>
                <ul class="noticeList" v-if="allnotice.length>0">
                    <li class="allnoticeList" v-for="item in allnotice" :key="item.id" :title="item.title">{{item.title}}</li>
                </ul>
                <p class="nullMsg" v-else>
                    暂无通知
                </p>
            </div>
            <div class="news notice">
                <header>消息（<span>{{pageInfo.meta.total}}</span>）</header>
                <div v-if="usernotice.length>0">
                    <ul class="newsList noticeList" >
                        <li class="clearfix" v-for="(item,i) in usernotice" :key="item.notify_id" @click="clickRead(item.notify_id,i)">
                            <div class="newsListLeft">
                                <i :class="item.read_at?'iconfont icon-email icon-yidu':'iconfont icon-email unRead'"></i>
                                <!-- <span class="usernoticeMsg">您刚刚申请了<span>100</span>元的提现，提现金额会在3个工作日内到账。</span>  -->
                                <span class="usernoticeMsg" :title="item.data.message">{{item.data.message}}</span> 
                            </div>
                            <div class="newsListRight">
                                <span>{{item.created_at}}</span>   
                                <span>{{item.ym}}</span>
                                <!-- <span class="el-icon-delete"></span> -->
                            </div>
                            
                        </li>
                    </ul>
                    <page :pageItem="pageInfo" style="width: 100%;position:absolute;bottom:5px" @pageChange="getMsg"></page>
                </div>
                
                <p class="nullMsg" v-else>
                    暂无消息
                </p>
            </div>
        </section>
    </div>
</template>
<script>
import loading from '../../loading'
import page from '../../page'
export default {
    name : "news",
    data(){
        return {
            msg : "消息",
            allnotice:null,//通知
            usernotice:null,//消息
            loadingShow:true,//loading显示
            pageInfo : null,//翻页数据
        }
    },
    methods: {
      clickRead(id,i){
            axios.get("/notifications/"+id).
            then(response=>{
                this.usernotice[i].read_at = true;
                this.$store.state.AuthUser.userInfo.data.notifications--;
            }).catch(error=>{
                console.log(error)
            }) 
      },
       getMsg(value){//翻页
            axios.get("/notifications?page="+value)
            .then(response=>{
                this.usernotice = response.data.data;
            })
        }  
    },
    components:{
        loading,
        page
    },
    created () {
        axios.get("/notifications").
        then(response=>{
            this.allnotice = response.data.allnotice;
            this.usernotice = response.data.data;
            this.pageInfo = response.data;
            this.loadingShow = false;
            this.$emit("newsSuccess");
        }).catch(error=>{
            console.log(error)
        });
    }
}
</script>
<style scope>
    .icon-yidu{
        font-size: 22px;
        margin-right: 12px;
    }
    .newsHead{
        height: 137px;
        background: #fff;
        padding: 32px 31px 0 38px;
        box-sizing: border-box;
        margin-bottom: 17px;
    }
    .headLeft,.newsHeadImg,.newsHeadInfo{
        float: left;
    }
    .newsHeadInfo{
        /* margin-top: 8px; */
        margin-left: 10px;
    }
    .newsHeadImg img{
        width: 76px;
        height: 76px;
        border-radius: 38px;
    }
    .userName{
        font-size: 18px;
        line-height: 32px;
        color: #333333;
    }
    .vipTime{
        font-size: 14px;
        line-height: 20px;
        color: #686868;

    }
    .userMsgCodeId{
        font-size: 16px;
        line-height: 26px;
        color: #333;
    }
    .userMsgCodeId span{
        margin-right: 15px;
    }
    .headRight{
        float: right;
    }
    .headRight{
        font-size: 14px;
        line-height: 22px;
        color: #3d3d3d;
        text-align: right;
    }
    .headRight p{
        margin-bottom: 7px;
    }
    .notice{
        height: 185px;
        background: #fff;
        margin-bottom: 15px;
    }
    .notice header{
        font-size: 16px;
        line-height: 66px;
        color: #333333;
        padding-left: 50px;
        border-bottom: 1px solid #dddddd;
        font-weight: bold;
    }
    .noticeList{
        width: 860px;
        margin: 0 auto;
    }
    .noticeList li{
        font-size: 16px;
        line-height: 56px;
        color: #525252;
        padding-left: 13px;
        cursor: pointer;
    }
    .noticeList li:nth-of-type(1){
        border-bottom: 1px dashed #dddddd;
    }
    .read{
        /* display: inline-block; */
        width: 24px;
        height: 21px;
        margin-right:14px;
        font-size: 20px;
        color: #999999;
        /* vertical-align: middle; */
        /* background: url(../../../img/newsRead.png) no-repeat; */
    }
    .newsListLeft{
        float: left;
    }
    .newsListRight{
        float: right;
    }
    /* .newsListRight span{
        display: inline-block;

    } */
    .newsListRight span:nth-of-type(1){
        margin-right: 23px;
    }
    .newsListRight span:nth-of-type(2){
        margin-right: 35px;
    }
    .news{
        position:relative;
        height: 554px;
    }
    .newsList li{
        border-bottom: 1px dashed #dddddd;
    }
    .newsList li:last-of-type{
        border: none;
    }
    .unRead{
        color: #ea514b;
        margin-right: 12px;
        padding-top:2px;
        /* background: url(../../../img/newsUnRead.png) no-repeat; */
    }
    .allnoticeList,.usernoticeMsg{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .usernoticeMsg{
        display:inline-block;
        width: 570px;
        vertical-align: middle;
    }
    .nullMsg{
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        height: 400px;
    }
    .iconfont {
        display: inline-block;
        /* width: 25px; */
        /* height: 25px; */
    }
</style>